import React, { useEffect } from 'react';
import { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Button } from 'antd';
/* 功能1：按钮自动倒计时(此功能重要占比60%)
进入页面时，卡片中的按钮开始自动 10s 倒计时
倒计时过程中，按钮显示剩余时间（文案为：10s、9s、8s、...、1s）
倒计时结束后，按钮文案变为「抢购」
功能2：抢购功能模拟(此功能重要占比20%)
点击抢购按钮时，调用异步模拟请求方法，请求完成后按钮文字变为「已抢购」
异步请求模拟方法需自行实现，延迟 1s 后返回成功即可
功能3：还原券css样式(此功能重要占比20%)
副标题最多支持2行，多余2行省略号表示 */

/** 请在这里实现功能 **/

const CardReact: React.FC<ICardProps> = (props) => {
  const { data } = props;
  const [btnTxt,setBtnTxt] = useState(10)
  useEffect(()=>{
	  const timer = setInterval(()=>{
		  if(btnTxt > 0){
			  setBtnTxt(btnTxt => btnTxt - 1)
		  }
		  else{
			  setBtnTxt(btnTxt => '抢购')
			  clearInterval(timer)
		  }
		  
	  },1000)
	  return ()=>{//在组件卸载时执行
	  	clearInterval(timer)
	  }
  })
  
  return (
    <div className="card">
    	<div className="cardTitle">{data.title}
		 <Button  className='cardBtn' type="primary">{btnTxt}</Button>
		</div>
		<div className="cardSub">{data.subTitle}</div>
    </div>
  );
};

const CardList: React.FC<{ list: IDirectVoucher[] }> = () => {
	
	/* FC数据=====begin */
	interface IDirectVoucher {
	  /** 标题 */
	  title?: string;
	  /** 副标题 */
	  subTitle?: string;
	}
	
	// 卡片数据
	const cardDataList: IDirectVoucher[] = [
	  {
	    title: '杭州市通用5元券',
	    subTitle: '杭味面馆非常好吃，太好吃了，相当不错，味道鲜美，特别划算，快快抢购，聚划算',
	  },
	  {
	    title: '杭州市10元券',
	    subTitle: '兰州拉面非常好吃'
	  },
	  {
	    title: '杭州市10元券',
	    subTitle: '兰州拉面非常好吃'
	  },
	];
	
	interface ICardProps {
	  data: IDirectVoucher;
	}
	/* FC数据=====end */
	
	
  return (
    <>
      {cardDataList.map((data,index) => (
        <CardReact key={index} data={data} />
      ))}
    </>
  );
};

export default CardList